<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>卡片</title>
        <link rel="stylesheet" href="./view/卡片/styles.css">
    </head>
    <body>
    <!-- Unnamed (Rectangle) -->
    <div id="u1564" class="ax_default heading_1">
        <div id="u1564_div" class=""></div>
        <div id="u1564_text" class="text ">
            <p><span>Card 卡片</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1565" class="ax_default heading_1">
        <div id="u1565_div" class=""></div>
        <div id="u1565_text" class="text ">
            <p><span>概述</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1566" class="ax_default label">
        <div id="u1566_div" class=""></div>
        <div id="u1566_text" class="text ">
            <p><span>基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。</span></p><p><span>下面的示例做了两种实现方式，各有优劣，可根据实际使用选择</span></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u1567" class="ax_default" data-left="230" data-top="282" data-width="366" data-height="223">

        <!-- Unnamed (Rectangle) -->
        <div id="u1568" class="ax_default box_1">
            <div id="u1568_div" class=""></div>
            <div id="u1568_text" class="text ">
                <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#2C8CF0;">Forrest Gump </span><span style="font-family:'Ionicons';color:#808695;"></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#2C8CF0;">Inception </span><span style="font-family:'Ionicons';color:#808695;"></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#2C8CF0;">Schindler's List </span><span style="font-family:'Ionicons';color:#808695;"></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#2C8CF0;">The Shawshank Redemption </span><span style="font-family:'Ionicons';color:#808695;"></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#2C8CF0;">Leon:The Professional </span><span style="font-family:'Ionicons';color:#808695;"></span></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1569" class="ax_default box_1">
            <img id="u1569_img" class="img " src="assets/images/卡片/u1569.svg"/>
            <div id="u1569_text" class="text ">
                <p><span style="font-family:'Ionicons';">&nbsp; </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">9.4</span></p><p><span style="font-family:'Ionicons';">&nbsp; </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">9.2</span></p><p><span style="font-family:'Ionicons';">&nbsp; </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">9.4</span></p><p><span style="font-family:'Ionicons';">&nbsp; </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">9.6</span></p><p><span style="font-family:'Ionicons';">&nbsp; </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">9.4</span></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1570" class="ax_default label">
            <div id="u1570_div" class=""></div>
            <div id="u1570_text" class="text ">
                <p style="font-size:14px;"><span style="font-family:'Ionicons';font-weight:400;color:#62697C;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:650;font-size:13px;">Classic Films</span></p>
            </div>
        </div>

        <!-- Unnamed (Line) -->
        <div id="u1571" class="ax_default line">
            <img id="u1571_img" class="img " src="assets/images/卡片/u1571.svg"/>
            <div id="u1571_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1572" class="ax_default label">
            <div id="u1572_div" class=""></div>
            <div id="u1572_text" class="text ">
                <p><span>Change</span></p>
            </div>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1573" class="ax_default label">
        <div id="u1573_div" class=""></div>
        <div id="u1573_text" class="text ">
            <p><span>无边框</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1574" class="ax_default label">
        <div id="u1574_div" class=""></div>
        <div id="u1574_text" class="text ">
            <p><span>不添加边框，建议在灰色背景下使用。</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1575" class="ax_default box_2">
        <div id="u1575_div" class=""></div>
        <div id="u1575_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u1576" class="ax_default" data-left="256" data-top="640" data-width="480" data-height="142">

        <!-- Unnamed (Rectangle) -->
        <div id="u1577" class="ax_default box_1">
            <img id="u1577_img" class="img " src="assets/images/卡片/u1577.svg"/>
            <div id="u1577_text" class="text ">
                <p><span>Content of no border type. Content of no border type. Content of no border type. Content of no border type.</span></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1578" class="ax_default label">
            <div id="u1578_div" class=""></div>
            <div id="u1578_text" class="text ">
                <p><span>No border title</span></p>
            </div>
        </div>

        <!-- Unnamed (Line) -->
        <div id="u1579" class="ax_default line">
            <img id="u1579_img" class="img " src="assets/images/卡片/u1579.svg"/>
            <div id="u1579_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1580" class="ax_default label">
        <div id="u1580_div" class=""></div>
        <div id="u1580_text" class="text ">
            <p><span>卡片阴影</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1581" class="ax_default label">
        <div id="u1581_div" class=""></div>
        <div id="u1581_text" class="text ">
            <p><span>有阴影来突出卡片的层级，建议在灰色背景下使用。</span></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u1582" class="ax_default box_2">
        <div id="u1582_div" class=""></div>
        <div id="u1582_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u1583" class="ax_default" data-left="825" data-top="640" data-width="228" data-height="169">

        <!-- Unnamed (Rectangle) -->
        <div id="u1584" class="ax_default box_1">
            <img id="u1584_img" class="img " src="assets/images/卡片/u1584.svg"/>
            <div id="u1584_text" class="text ">
                <p><span>Content of card</span></p><p><span>Content of card</span></p><p><span>Content of card</span></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1585" class="ax_default label">
            <div id="u1585_div" class=""></div>
            <div id="u1585_text" class="text ">
                <p><span>Borderless card</span></p>
            </div>
        </div>

        <!-- Unnamed (Line) -->
        <div id="u1586" class="ax_default line">
            <img id="u1586_img" class="img " src="assets/images/卡片/u1586.svg"/>
            <div id="u1586_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u1587" class="ax_default" data-left="1078" data-top="640" data-width="228" data-height="169">

        <!-- Unnamed (Rectangle) -->
        <div id="u1588" class="ax_default box_1">
            <img id="u1588_img" class="img " src="assets/images/卡片/u1588.svg"/>
            <div id="u1588_text" class="text ">
                <p><span>Content of card</span></p><p><span>Content of card</span></p><p><span>Content of card</span></p>
            </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1589" class="ax_default label">
            <div id="u1589_div" class=""></div>
            <div id="u1589_text" class="text ">
                <p><span>Use a card with a shadow</span></p>
            </div>
        </div>

        <!-- Unnamed (Line) -->
        <div id="u1590" class="ax_default line">
            <img id="u1590_img" class="img " src="assets/images/卡片/u1586.svg"/>
            <div id="u1590_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>
    </body>
</html>
